// out: ../css/

// 导入初始化样式
@import 'base.less';

@mainColor: #fb7299;
@vw: 3.75vw;

// 头部
header{
    z-index: 1;
    top: 0;
    left: 0;
    position: fixed;
    height: (84/@vw);
    width: 100%;
    padding: 0 (16/@vw);
    border-bottom: 1px solid #f5f4f4;
    background-color: #fff;
    .navbar{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: (44/@vw);
        .left{
            a{
                i{
                    color: @mainColor;
                    font-size: (25/@vw);
                }
            }
        }
        .right{
            width: (200/@vw);
            display: flex;
            justify-content: space-around;
            span{
                i{
                 font-size: (22/@vw);
                 color: #cdcbcb;
               }
            }
            .avatar{
                width: (24/@vw);
                height: (24/@vw);
            }
            .download{
                width: (72/@vw);
                height: (24/@vw);
            }
        }
    }
    .menu{   
        height: (38/@vw);
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        ul{
            margin-right: (65/@vw);
            width: (300 / @vw);
            display: flex;
            justify-content: space-between;
            align-items: center;
           font-size: (14/@vw);
           color: #333;  
            .active{
                border-bottom: 1px solid @mainColor;
                line-height: (38/@vw);
                a{
                    width: (28/@vw);
                    color: @mainColor;
                }
            }
        
        
        }
        .more{
            width: (20/@vw);
            height: (20/@vw);
            color: #cdcbcb;
        }
    }

}


// 内容
.main{
    margin-top: (95/@vw);
    padding: 0 (5/@vw);
    ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: (15 /@vw);
    
            li {
                padding: 0 (6 /@vw) (15 /@vw) (8 /@vw);
                width: 50%;        
                box-sizing: border-box;
                .pic {
                    position: relative;
                    width: (172 / @vw);
                    height: (97 / @vw);
    
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;                   
                    }  
                    .cover {         
                        position: absolute;
                        left: 0;
                        bottom: (5 / @vw);
                        display: flex;
                        justify-content: space-between;
                        width: 100%;
                        padding: 0 (10 / @vw);           
                        color: #fff;
                        font-size: (14 / @vw);
                        p{
                            text-align: center;         
                        font-size: (12 /@vw);
                            i{
                                font-size: (14/ @vw);
                                margin-right: (3 /@vw);
                            }
                            
                        }

                    }
                }
    
                .bottom_txt {
                    margin: (6 /@vw) 0 0;
                    font-size: (12 /@vw);
                    color: #333;
                    text-overflow: clip;
                    overflow: hidden;
                        /* 隐藏超出部分 */
                     display: -webkit-box;
                        /* 创建一个弹性盒子 */
                    -webkit-box-orient: vertical;
                        /* 设置为垂直方向 */
                    -webkit-line-clamp: 2;       
                  
                }
            }
        }

}


// 打开按钮
.btn{
       width: (351 /@vw);
        height: (36/ @vw);
        // display: flex;
        position: fixed;
        bottom: (15/ @vw);
       line-height: (36/ @vw);
        text-align: center;
        background-color: @mainColor;
        border-radius: (18/@vw);
        padding: 0 (10 /@vw);
        margin: 0 (15 /@vw);
    
       a{   
          i {
                width: (35 /@vw);
                height: (16 /@vw);
                color: #fff;
            }
            span {
               font-size: (14/@vw);
               color: #fff;
          
               
            }
       }
}

